<template>
  <view>
    <view class="content" 
    v-for="(item,index) in listData" :key="index"
    @click="clickDetail(item)"
    >
      <view class="left">
        <image class="head-img" :src="item.proPhoto" />
      </view>
      <view class="right">
       <view class="top">
        <text class="people">{{ item.proName }}</text>
        <text class="title">{{ item.professionalTitle }}</text>
       </view>
       <view class="center">
        <text>{{ item.hospital }}</text>
        <text class="department">{{ item.department }}</text>
       </view>
       <view class="down">
        <text class="adept">擅长:{{ item.briefText }}</text>
       </view>
      </view>
      </view>
  </view>
</template>

<script>
  export default {
    name: 'ExpertTeamList',
    data() {
      return {
        listData: [],
        baseUrl:this.$pageConfig.baseUrl,
      }
    },
    props: {
      expertTeamList: {
        type: Array,
        default: []
      }
    },
    watch: {
      expertTeamList: {
        handler(newVal, oldVal) {
          this.listData = uni.$u.deepClone(newVal)
        },
        deep: true
      }
    },
    created() {
      this.listData = uni.$u.deepClone(this.expertTeamList)
    },
    methods: {
      clickDetail(item){
        uni.navigateTo({ url: `/subPages/userIndex/expertTeam/expertTeamDetail?id=${item.id}` })
      }
    }
  }
</script>
<style lang="scss">
.content {
  display: flex;
  margin: 30rpx auto;
  padding: 24rpx 30rpx;
  border-radius: 16rpx;
  background: #ffffff;
  .left {
    margin-right: 20rpx;
    .head-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      background-color: #ebebed;
    }
  }
  .right {
    flex: 1;
    padding: 10rpx 0 0;
    .top {
      display: flex;
      align-items: center;
      .people {
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
      }
      .title {
        height: 36rpx;
        margin-left: 20rpx;
        padding: 0 12rpx;
        border-radius: 8rpx;
        border: 0.5px solid #115baa;
        line-height: 36rpx;
        text-align: center;
        font-size: 24rpx;
        color: #115BAA;
      }
    }
    .center {
      margin: 20rpx 0;
      font-size: 28rpx;
      color: #333333;
      .department{
        margin-left: 20rpx;
      }
    }
    .down {
      font-size: 24rpx;
      color: #999;
      .adept{
        line-height: 36rpx;
        display: -webkit-box; /* 使用 Webkit 盒模型 */
        -webkit-box-orient: vertical; /* 垂直方向 */
        -webkit-line-clamp: 2; /* 显示的行数 */
        overflow: hidden;
      }
    }
  }
}
</style>
